<template>
  <a-drawer
      :title="title"
      :visible="visible"
      :width="$store.getters.isMobile ? '100%' : 750"
      @close="onClose"
  >
    <div class="detail-show">
      <div class="detail-content" v-if="detail.id">
        <a-row type="flex" class="header">
          <a-col flex="auto" style="line-height: 32px">
            编号： {{ detail.form_id }}
          </a-col>
        </a-row>
        <section class="content" :gutter="[0, 12]">
          <div style="display: flex; align-items: center">
            <span class="cat-name">{{ detail.approval_name }}</span>
            <a-tag :color="colorList[detail.status]">
              {{ detail.status_txt }}
            </a-tag>
          </div>
          <div class="mt-10">
            <a-avatar
                :src="detail.user_avatar"
                style="color: #fff; background-color: #2681f3"
                :size="24"
            >
              <template #icon>
                <UserOutlined/>
              </template>
            </a-avatar>
            <span class="ml-10">{{ detail.user_name }}</span>
            <span class="ml-10" style="color: #888">
              {{ detail.department_name }}
            </span>
          </div>
          <a-divider/>
          <div>
            <template v-for="formItem of form" :key="formItem.key">
              <div v-if="formItem.type == 'tips'" class="form-tip">
                <span>{{ formItem.setting.placeholder }}</span>
              </div>
              <a-descriptions layout="vertical" v-else :column="1">
                <a-descriptions-item
                    :label="formItem.name"
                    :labelStyle="{ color: '#999', marginBottom: '-10px' }"
                    :contentStyle="{
                    color: '#333',
                    fontSize: '18px',
                    display: 'block',
                    width: '100%',
                  }"
                >
                  <div v-if="formItem.type == 'image'" class="img-box">
                    <img
                        v-for="(item, imgIndex) of formItem.value"
                        :key="imgIndex"
                        :src="item.url"
                        class="img"
                        :alt="item.name"
                        @click="previewImg(imgIndex, formItem.value)"
                    />
                  </div>
                  <div v-else-if="formItem.type == 'file'">
                    <a-button
                        type="link"
                        v-for="(file, fileIndex) of formItem.value"
                        :key="fileIndex"
                        @click="downloadFile(file)"
                    >
                      <template #icon>
                        <PaperClipOutlined/>
                      </template>
                      {{ file.name }}
                    </a-button>
                  </div>
                  <div class="detail" v-else-if="formItem.type == 'detail'">
                    <a-table
                        :columns="tableData[formItem.key].columns"
                        :dataSource="tableData[formItem.key].data"
                        :scroll="{ x: 'max-content' }"
                        :pagination="false"
                        rowKey="key"
                    >
                      <template #bodyCell="{ text, column }">
                        <template v-if="column.customSlots === 'image'">
                          <a-row :gutter="[8, 12]" v-if="text && text.length">
                            <a-col
                                :span="8"
                                v-for="(item, imgIndex) of text"
                                :key="imgIndex"
                            >
                              <img
                                  :src="item.url"
                                  :alt="item.name"
                                  class="img"
                                  @click="previewImg(imgIndex, text)"
                              />
                            </a-col>
                          </a-row>
                          <span v-else>--</span>
                        </template>
                        <template v-if="column.customSlots === 'file'">
                          <div v-if="text && text.length">
                            <a-button
                                type="link"
                                v-for="(file, fileIndex) of text"
                                :key="fileIndex"
                                @click="downloadFile(file)"
                            >
                              <template #icon>
                                <PaperClipOutlined/>
                              </template>
                              {{ file.name }}
                            </a-button>
                          </div>
                          <span v-else>--</span>
                        </template>
                        <template v-if="column.customSlots === 'text'">
                          <span>{{ text || "--" }}</span>
                        </template>
                      </template>
                    </a-table>
                  </div>
                  <span v-else>
                    {{ formItem.value || "--" }}
                  </span>
                </a-descriptions-item>
              </a-descriptions>
            </template>
          </div>
          <a-divider/>
          <div class="module-title">审批进程</div>
          <a-timeline class="process" v-if="process.length">
            <a-timeline-item
                v-for="(processItem, processIndex) of process"
                :key="processItem.key"
            >
              <!-- 节点图标 -->
              <template #dot>
                <template v-if="processItem.type == 'start'">
                  <div class="relative">
                    <a-avatar
                        :size="40"
                        style="color: #fff; background-color: #2681f3"
                    >
                      <template #icon>
                        <FileAddOutlined/>
                      </template>
                    </a-avatar>
                    <CheckCircleFilled class="status" :style="style.agree"/>
                  </div>
                </template>
                <template v-else-if="processItem.type == 'approval'">
                  <div class="relative">
                    <a-avatar
                        :size="40"
                        style="color: #fff; background-color: #ff8800"
                    >
                      <template #icon>
                        <AuditOutlined/>
                      </template>
                    </a-avatar>
                    <CheckCircleFilled
                        v-if="processItem.data.agree == true"
                        class="status"
                        :style="style.agree"
                    />
                    <CloseCircleFilled
                        v-if="processItem.data.agree == false"
                        class="status"
                        :style="style.reject"
                    />
                  </div>
                </template>
                <template v-else-if="processItem.type == 'deal'">
                  <div class="relative">
                    <a-avatar
                        :size="40"
                        style="color: #fff; background-color: #935af6"
                    >
                      <template #icon>
                        <CarryOutOutlined/>
                      </template>
                    </a-avatar>
                    <CheckCircleFilled
                        v-if="processItem.data.agree == true"
                        class="status"
                        :style="style.agree"
                    />
                  </div>
                </template>
                <template v-else-if="processItem.type == 'copy'">
                  <div class="relative">
                    <a-avatar
                        :size="40"
                        style="color: #fff; background-color: #3370ff"
                    >
                      <template #icon>
                        <SisternodeOutlined/>
                      </template>
                    </a-avatar>
                    <CheckCircleFilled
                        v-if="processIndex < detail.process_now"
                        class="status"
                        :style="style.agree"
                    />
                  </div>
                </template>
                <template v-else-if="processItem.type == 'end'">
                  <div class="relative">
                    <a-avatar
                        :size="40"
                        style="color: #fff; background-color: #2681f3"
                    >
                      <template #icon>
                        <FileDoneOutlined/>
                      </template>
                    </a-avatar>
                    <CheckCircleFilled
                        v-if="processIndex == detail.process_now"
                        class="status"
                        :style="style.agree"
                    />
                  </div>
                </template>
              </template>
              <!-- 节点内容 -->
              <div class="process-content">
                <div class="node-title">
                  <span>{{
                      processItem.data.name || processItem.typeTxt
                    }}</span>
                  <a-tag
                      style="margin-left: 10px"
                      color="orange"
                      v-if="processItem.type == 'approval'"
                  >
                    {{ processItem.data.approvalWay == 1 ? "会签" : "或签" }}
                  </a-tag>
                </div>
                <!-- 发起节点 -->
                <template v-if="processItem.type == 'start'">
                  <div class="flex align-middle between mt-10 flex-wrap">
                    <div class="flex align-middle no-wrap">
                      <div class="relative">
                        <a-avatar
                            :src="detail.user_avatar"
                            :size="30"
                            style="color: #fff; background-color: #2681f3"
                        >
                          <template #icon>
                            <UserOutlined/>
                          </template>
                        </a-avatar>
                        <CheckCircleFilled
                            class="status"
                            :style="style.agree"
                        />
                      </div>
                      <span class="ml-10">{{ detail.user_name }}</span>
                    </div>
                    <div class="flex align-middle no-wrap ml-10">
                      <span>已发起</span>
                      <span class="ml-10 text-gray">{{
                          detail.created_at
                        }}</span>
                    </div>
                  </div>
                </template>
                <!-- 审批节点 -->
                <div
                    v-if="
                    processItem.type == 'approval' &&
                    processItem.data.approver_userArr &&
                    processItem.data.approver_userArr.length
                  "
                >
                  <div
                      v-for="item of processItem.data.approver_userArr"
                      :key="item.id"
                      class="flex align-middle between mt-10 flex-wrap"
                  >
                    <div class="flex align-middle no-wrap">
                      <div class="relative">
                        <a-avatar
                            :src="item.avatar"
                            :size="30"
                            style="color: #fff; background-color: #2681f3"
                        >
                          <template #icon>
                            <UserOutlined/>
                          </template>
                        </a-avatar>
                        <CheckCircleFilled
                            v-if="item.op_type == 'agree'"
                            class="status"
                            :style="style.agree"
                        />
                        <CloseCircleFilled
                            v-if="item.op_type == 'reject'"
                            class="status"
                            :style="style.reject"
                        />
                      </div>
                      <span class="ml-10">{{ item.realname }}</span>
                    </div>
                    <div class="flex align-middle no-wrap" v-if="item.op_type">
                      <template v-if="item.op_type">
                        <span>
                          {{ item.op_type == "agree" ? "已通过" : "已拒绝" }}
                        </span>
                        <span class="ml-10 text-gray" v-if="item.op_time">
                          {{ item.op_time }}
                        </span>
                      </template>
                      <span v-else>未审批</span>
                    </div>
                  </div>
                </div>
                <!-- 处理节点 -->
                <div
                    v-if="
                    processItem.type == 'deal' &&
                    processItem.data.dealer_userArr &&
                    processItem.data.dealer_userArr.length
                  "
                >
                  <div
                      v-for="item of processItem.data.dealer_userArr"
                      :key="item.id"
                      class="flex align-middle between mt-10 flex-wrap"
                  >
                    <div class="flex align-middle no-wrap">
                      <div class="relative">
                        <a-avatar
                            :src="item.avatar"
                            :size="30"
                            style="color: #fff; background-color: #2681f3"
                        >
                          <template #icon>
                            <UserOutlined/>
                          </template>
                        </a-avatar>
                        <CheckCircleFilled
                            v-if="item.op_type == 'agree'"
                            class="status"
                            :style="style.agree"
                        />
                        <!-- <CloseCircleFilled
                          v-if="item.op_type == 'reject'"
                          class="status"
                          :style="style.reject"
                        /> -->
                      </div>
                      <span class="ml-10">{{ item.realname }}</span>
                    </div>
                    <div class="flex align-middle no-wrap" v-if="item.op_time">
                      <span>已办理</span>
                      <span class="ml-10 text-gray">{{ item.op_time }}</span>
                    </div>
                  </div>
                </div>
                <!-- 抄送节点 -->
                <div
                    v-if="
                    processItem.type == 'copy' &&
                    processItem.data.ccList_userArr &&
                    processItem.data.ccList_userArr.length
                  "
                >
                  <div
                      v-for="item of processItem.data.ccList_userArr"
                      :key="item.id"
                      class="flex align-middle between mt-10 flex-wrap"
                  >
                    <div class="flex align-middle">
                      <div class="relative">
                        <a-avatar
                            :src="item.avatar"
                            :size="30"
                            style="color: #fff; background-color: #2681f3"
                        >
                          <template #icon>
                            <UserOutlined/>
                          </template>
                        </a-avatar>
                        <CheckCircleFilled
                            v-if="processIndex < detail.process_now"
                            class="status"
                            :style="style.agree"
                        />
                      </div>

                      <span class="ml-10">{{ item.realname }}</span>
                    </div>
                    <!-- <div class="flex align-middle">
                      <span>已抄送</span>
                      <span class="ml-10 text-gray" v-if="item.op_time">
                        {{ item.op_time }}
                      </span>
                    </div> -->
                  </div>
                </div>
                <!-- 抄送人 -->
                <div
                    v-if="
                    processItem.type != 'copy' &&
                    processItem.data.ccList_userArr &&
                    processItem.data.ccList_userArr.length
                  "
                    class="mt-10"
                    style="background: #f7f7f7; padding: 10px; border-radius: 8px"
                >
                  <a-row type="flex" :gutter="[24, 24]">
                    <a-col
                        v-if="
                        processIndex < detail.process_now || detail.status == 1
                      "
                    >
                      <a-tag
                          color="blue"
                          style="margin-top: 4px; margin-right: -8px"
                      >
                        已抄送至
                      </a-tag>
                    </a-col>
                    <a-col
                        v-for="item of processItem.data.ccList_userArr"
                        :key="item.id"
                    >
                      <div class="flex align-middle">
                        <a-avatar
                            :src="item.avatar"
                            :size="30"
                            style="color: #fff; background-color: #2681f3"
                        >
                          <template #icon>
                            <UserOutlined/>
                          </template>
                        </a-avatar>
                        <span class="ml-10">{{ item.realname }}</span>
                      </div>
                    </a-col>
                  </a-row>
                </div>
              </div>
            </a-timeline-item>
          </a-timeline>
        </section>
      </div>
      <div class="no-content" v-else-if="!pageLoading">
        <a-empty description="无内容"/>
      </div>
      <!-- 操作栏 -->
      <div
          class="option-bar"
          v-if="
          detail.dealerHandle || detail.approverHandle || detail.revoke == 1
        "
      >
        <a-space size="large">
          <!-- <a-button
            v-if="detail.dealerHandle"
            type="primary"
            key="deal"
            :loading="submitLoading"
            @click="approvalForm('agree')"
          >
            <template #icon>
              <CheckOutlined />
            </template>
            办理
          </a-button> -->
          <template v-if="detail.approverHandle">
            <a-button
                type="primary"
                :loading="submitLoading"
                key="agree"
                @click="approvalForm('agree')"
            >
              <template #icon>
                <CheckOutlined/>
              </template>
              同意
            </a-button>

            <a-button
                type="primary"
                :loading="submitLoading"
                danger
                @click="approvalForm('reject')"
                key="reject"
            >
              <template #icon>
                <CloseOutlined/>
              </template>
              拒绝
            </a-button>
          </template>

        </a-space>
      </div>
      <!-- 预览图片 -->
      <PreviewImg
          :visible="imgVisible"
          :index="imgIndex"
          :list="imgList"
          @close="imgVisible = false"
      />
    </div>
  </a-drawer>
</template>

<script>
import {defineComponent, reactive, toRaw, toRefs, watch, computed} from "vue";
import request from "../../../../common/utils/request";
import {
  FileAddOutlined,
  UserOutlined,
  PaperClipOutlined,
  AuditOutlined,
  CarryOutOutlined,
  SisternodeOutlined,
  FileDoneOutlined,
  CheckOutlined,
  CloseOutlined,
  UndoOutlined,
  CheckCircleFilled,
  CloseCircleFilled,
  PrinterOutlined,
  BellOutlined,
} from "@ant-design/icons-vue";
import {PreviewImg} from "bl-common-vue3";
import {message} from "ant-design-vue";
import utils from "../../../../common/utils/utils";
import {useRouter} from "vue-router";
import moment from "moment";
import store from "../../../../store";
import defaultSetting from "../../../../common/utils/defaultSetting";

const colorList = {
  0: "blue",
  1: "green",
  2: "red",
  4: "gray",
};

export default defineComponent({
  name: "DetailShow",
  props: {
    id: {
      type: Number,
      default: 0,
    },
    visible: {
      type: Boolean,
      default: false,
    },
    origin: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: "审批详情"
    }
  },
  components: {
    FileAddOutlined,
    UserOutlined,
    PaperClipOutlined,
    PreviewImg,
    AuditOutlined,
    CarryOutOutlined,
    SisternodeOutlined,
    FileDoneOutlined,
    CheckOutlined,
    CloseOutlined,
    UndoOutlined,
    CheckCircleFilled,
    CloseCircleFilled,
    PrinterOutlined,
    BellOutlined,
  },
  directives: {
    print,
  },
  setup(props, {emit}) {
    const router = useRouter();
    const state = reactive({
      detail: {},
      form: [],
      tableData: {},
      imgVisible: false,
      imgIndex: 0,
      imgList: [],
      process: [],
      pageLoading: false,
      submitLoading: false,
    });

    const previewImg = (index, list) => {
      state.imgList = list.map((item) => item.url);
      state.imgIndex = index;
      state.imgVisible = true;
    };

    const downloadFile = (file) => {
      window.open(file.url);
    };

    const approvalForm = (handle) => {
      state.submitLoading = true;
      let url;
      if (props.origin) {
        //租客端
        url = "/tenant/approvalForm/approval";
      } else {
        url = "/staff/approval/form";
      }
      request
          .put("/work_approval", url, {
            id: state.detail.id,
            handle,
            needMsg: true,
          })
          .then((res) => {
            message.success(res.msg || "操作成功！");
            // getApprovalDetail();

            emit("statusChange");
          })
          .finally(() => {
            state.submitLoading = false;
            postMessageToParent(handle);
          });
    };

    const revokeApproval = () => {
      utils.modalConfirm({
        content: "确认撤销当前审批吗？",
        onOk: () => {
          request
              .put("/work_approval", "/staff/approval/form/revoke", {
                id: state.detail.id,
                needMsg: true,
              })
              .then((res) => {
                message.success(res.msg || "撤销成功！");
                // getApprovalDetail();

                emit("statusChange");
                postMessageToParent("revoke");
              });
        },
      });
    };

    const onClose = () => {
      emit("closeDrawer");
    };

    const ApprovalUrging = () => {
      request
          .post("/work_approval", "/staff/approval/form/urge-approval", {
            id: state.detail.id,
          })
          .then((res) => {
            message.success(res.msg || "催办成功！");
          });
    };

    const postMessageToParent = (result) => {
      if (!window.__POWERED_BY_QIANKUN__ && window.self !== window.parent) {
        window.parent.postMessage(
            {
              type: "approvalFinished",
              result,
            },
            "*"
        );
      }
    };

    const getSlotsRender = (type) => {
      if (["image", "file"].includes(type)) {
        return type;
      }
      return "text";
    };

    let keyCount = 0;
    const handleTableColumns = () => {
      state.tableData = {};
      state.form.forEach((formItem) => {
        keyCount++;
        formItem.key = formItem.key || `key_${keyCount}`;
        if (formItem.type == "detail") {
          state.tableData[formItem.key] = {
            columns: formItem.formList.map((item) => ({
              title: item.name,
              key: item.key,
              dataIndex: item.key,
              width: item.type == "image" ? 300 : 180,
              customSlots: getSlotsRender(item.type),
              // ellipsis: true,
            })),
            data: formItem.value.map((item, index) => {
              let newItem = {index: `${index + 1}`};
              if (!item.key) {
                item.key = `${formItem.key}_${index}`;
              }
              item.forEach((item2, index2) => {
                if (item2.key && item2.key.indexOf("#") > -1) {
                  item2.key = item2.key.split("#")[0];
                }
                if (!item2.key) {
                  item2.key = `col_${index2}`;
                }
                newItem[item2.key] = item2.value;
              });
              return newItem;
            }),
          };
          state.tableData[formItem.key].columns.unshift({
            title: "#",
            key: "index",
            dataIndex: "index",
            fixed: "left",
            width: 100,
          });
        }
      });
    };

    const getFormData = (formList) => {
      let form = [];
      formList.forEach((formItem) => {
        if (!formItem.name) {
          formItem.name = formItem.setting.name;
        }
        if (formItem.type == "daterange") {
          form.push({
            ...formItem,
            key: `${formItem.key}_start`,
            name: formItem.name[0],
            value: formItem.value.start,
          });
          form.push({
            ...formItem,
            key: `${formItem.key}_end`,
            name: formItem.name[1],
            value: formItem.value.end,
          });
          form.push({
            ...formItem,
            key: `${formItem.key}_duration`,
            name: formItem.name[2] + "（天）",
            value: formItem.value.duration,
          });
        } else {
          if (formItem.type == "check") {
            if (formItem.value) {
              formItem.value = formItem.value.join("/");
            }
          }
          if (
              (formItem.type == "image" || formItem.type == "file") &&
              formItem.value
          ) {
            if (Array.isArray(formItem.value)) {
              formItem.value = formItem.value.map((item) => ({
                name: item.name || item,
                url: item.url || item,
              }));
            } else {
              formItem.value = [];
            }
          }
          if (formItem.type == "detail") {
            if (!formItem.formList && formItem.value.length) {
              // 其他应用没有传formList需要根据value组装
              formItem.formList = formItem.value[0].map((item, index) => ({
                ...item,
                key: `col_${index}`,
                value: "",
              }));
            }
            formItem.formList = getFormData(formItem.formList);
            formItem.value = formItem.value.map((item) => getFormData(item));
          }
          form.push(formItem);
        }
      });
      return form;
    };

    const getApprovalDetail = () => {
      state.pageLoading = true;
      state.detail = {};
      state.process = [];
      state.form = [];

      let url;
      if (props.origin) {
        //租客端
        url = "/tenant/approvalForm/get";
      } else {
        url = "/staff/approval/form/detail";
      }
      request
          .get("/work_approval", url, {
            id: props.id,
          })
          .then((res) => {
            if (props.origin) {
              //租客端
              state.detail = res.result;
            } else {
              state.detail = res.detail;
            }
            // console.log(state.detail);
            if (state.detail.status != 0) {
              // 通知审批结束
              emit("finish");
            }
            state.process = state.detail.process;
            state.form = getFormData(state.detail.form);
            handleTableColumns();
            console.log("-------------getApprovalDetail", toRaw(state.process));
          })
          .finally(() => {
            state.pageLoading = false;
          });
    };

    const init = () => {
      if (props.id) {
        getApprovalDetail();
      }
    };

    init();

    // watch(
    //   () => props.id,
    //   (id) => {
    //     if (id) {
    //       getApprovalDetail();
    //     } else {
    //       state.detail = {};
    //       state.process = [];
    //       state.form = [];
    //     }
    //   }
    // );

    watch(
        () => props.visible,
        (val) => {
          if (val == true) {
            init();
          } else {
            state.detail = {};
            state.process = [];
            state.form = [];
          }
        }
    );

    const printClick = (id) => {
    };

    const userInfo = computed(() => {
      let userInfo = {};
      if (store.getters.iframeData && store.getters.iframeData.userInfo) {
        userInfo = JSON.parse(store.getters.iframeData.userInfo);
      }
      return userInfo;
    });

    const codeUrl = computed(() => {
      let url = `${
          utils.isEnv()
              ? "https://app.kuaijingai.com"
              : defaultSetting.requestDomain
      }/h5_orgs/pages/approval/detail?org_id=${
          store.getters.userInfo.org_id
      }&id=${props.id}`;
      console.log("codeUrl", codeUrl);
      return url;
    });

    const printObj = {
      id: "printContent",
      popTitle: "资产标签",
      extraCss: `${utils.staticPath}/file/approval/PrintIframe.css`,
      extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',
      beforeOpenCallback(vue) {
        vue.printLoading = true;
        console.log("打开之前");
      },
      openCallback(vue) {
        vue.printLoading = false;
        console.log("执行了打印");
      },
      closeCallback(vue) {
        console.log("关闭了打印工具");
      },
    };

    return {
      colorList,
      style: {
        agree: `color: #52c41a`,
        reject: `color: #f5222d`,
      },
      ...toRefs(state),
      previewImg,
      downloadFile,
      approvalForm,
      revokeApproval,
      printClick,
      moment,
      userInfo,
      codeUrl,
      printObj,
      ApprovalUrging,
      onClose,
    };
  },
});
</script>

<style lang="less" scoped>
.detail-show {
  width: 100%;
  height: 100%;
  position: relative;

  .detail-content {
    height: 100%;
    overflow: hidden auto;
    position: relative;

    .header {
      background: #fff;
      padding: 8px 10px;
      border-bottom: 1px solid #f1f1f1;
      color: #999;

      .print-button {
        cursor: pointer;
        padding: 8px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 4px;
        font-size: 16px;
        transition: 0.2s ease;

        &:hover {
          background-color: #f2f3f3;
        }
      }
    }

    .content {
      padding: 20px;

      .cat-name {
        font-size: 24px;
        font-weight: bold;
        margin-right: 10px;
      }

      .img-box {
        display: flex;
        align-items: center;

        .img {
          margin-right: 10px;
        }
      }

      .img {
        width: 80px;
        height: 80px;
        border-radius: 8px;
        margin-right: 10px;
        border: 1px solid #f1f1f1;
        cursor: pointer;
      }

      .detail {
        :deep(.ant-table td) {
          overflow: hidden;
        }
      }

      .form-tip {
        padding: 10px;
        background: #f1f1f1;
        margin-bottom: 16px;
        color: #000;
      }

      // .module-title {
      // }
      .process {
        margin-top: 20px;
        padding: 20px;

        .relative {
          position: relative;

          .status {
            position: absolute;
            right: 0;
            bottom: 0;
            z-index: 99;
            background: #fff;
            border-radius: 50%;
          }
        }

        .process-content {
          margin-left: 20px;
          padding-bottom: 20px;
          line-height: 24px;

          .node-title {
            line-height: 30px;
            font-weight: bold;
          }
        }
      }
    }
  }

  .no-content {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .option-bar {
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background: #fefefe;
    height: 60px;
    border-top: 1px solid #ddd;
    display: flex;
    align-items: center;
    padding: 0 20px;
    z-index: 111;
    justify-content: flex-end;
  }

  // 打印区域
  .approval_print {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -999;
    width: 640px;
    margin: 0 auto;
    padding-top: 18px;
    font-family: "lucida Grande", Verdana, "Microsoft YaHei";
    display: none;
  }

  .approval_print_pdf {
    width: 640px;
  }

  .approval_print_title {
    margin-bottom: 20px;
    font-size: 15px;
    font-weight: bold;
    text-align: center;
  }

  .approval_print_data {
    width: 100%;
    border-spacing: 1px;
    border-collapse: collapse;
    table-layout: fixed;
  }

  .approval_print_data tr {
    border-left: 1px solid #787878;
    border-right: 1px solid #787878;
  }

  .approval_print_data_value,
  .approval_print_data_title {
    height: 18px;
    padding: 4px 8px;
    border: 1px solid #787878;
    overflow: hidden;
    word-break: break-word;
    word-wrap: break-word;
  }

  .approval_print_data_value {
    width: 30%;
    background-color: #fff;
    font-size: 12px;
  }

  .approval_print_data_title {
    width: 16%;
    background-color: #f3f3f3;
    color: #000;
    font-size: 12px;
    text-align: center;
  }

  .approval_print_data_value ul,
  .approval_print_data_value ol {
    list-style: disc;
    padding-left: 20px;
  }

  .approval_print_data_value li {
    list-style: disc;
    padding-left: 0;
  }

  .approval_print_data_value ol li {
    list-style: decimal;
  }

  .approval_print_data_value pre {
    white-space: pre-wrap;
    overflow-wrap: break-word;
    font-family: "lucida Grande", Verdana, "Microsoft YaHei";
    margin-bottom: 0;
  }

  .approval_print_data_sectionTitle {
    height: 30px;
    padding-left: 25px;
    background-color: #fff;
    font-size: 12px;
    color: #000;
  }

  .approval_print_data_space {
    height: 15px;
    background: #fff;
    border-right: 1px solid #787878;
    border-left: 1px solid #787878;
  }

  .approval_print_space_title {
    height: 20px;
    background: #f3f3f3;
    text-align: center;
    border: 1px solid #787878;
    font-size: 12px;
  }

  .approval_print_info {
    float: right;
    padding-top: 40px;
    line-height: 20px;
    font-size: 12px;
    text-align: left;
  }

  .approval_print_data_title_center {
    text-align: center;
  }

  .approval_print_info_date,
  .approval_print_info_user {
    display: inline-block;
    margin-left: 30px;
  }

  .approval_print_qr {
    height: 120px;
    display: flex;
    align-items: center;
  }

  .approval_print_qr_image_wrap img {
    vertical-align: top;
    width: 70px;
    height: 70px;
    float: left;
    margin-right: 10px;
  }

  .approval_print_qr_text {
    font-size: 12px;
    line-height: 20px;
    padding-left: 15px;
    margin-bottom: 0;
  }

  .approval_print_data_value_commentItem {
    line-height: 25px;
  }

  .print_tips_value {
    color: rgba(11, 18, 26, 0.6);
  }

  .approval_nested_table {
    width: 100%;
    height: 100%;
    border-spacing: 1px;
    border-collapse: collapse;
    table-layout: fixed;
  }

  .approval_print_data_nested {
    padding: 0;
    border: none;
  }

  .approval_print_data_nested_1 .approval_print_data_title {
    border-bottom: none;
  }

  .approval_nested_table .approval_print_data_title:last-child,
  .approval_nested_table .approval_print_data_value:last-child {
    border-right: none;
  }

  .approval_nested_table .approval_print_data_title:first-child,
  .approval_nested_table .approval_print_data_value:first-child {
    border-left: none;
  }

  .approval_nested_table tr {
    border-left: none;
    border-right: none;
  }

  .approval_print_header > div {
    margin-bottom: 4px;
    font-size: 12px;
    color: #000;
  }

  .approval_print_header .corp_name {
    float: left;
    max-width: 400px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    font-weight: 500;
  }

  .approval_print_header .approval_spNo {
    float: right;
    font-weight: 400;
  }

  .approval_print_header::after {
    content: "";
    display: inline-block;
    clear: both;
  }
}
</style>
